Skip to content

feat: 핵심 노드 컴포넌트 구현 및 렌더링 시스템 구축#11

Merged
y-minion merged 22 commits intodevelopfrom
feature/node-component
Dec 17, 2025
Merged

feat: 핵심 노드 컴포넌트 구현 및 렌더링 시스템 구축#11
y-minion merged 22 commits intodevelopfrom
feature/node-component

Conversation

@y-minion
Copy link
Copy Markdown
Contributor

📌 개요

웹 빌더 에디터의 핵심이 되는 노드 컴포넌트 시스템과 이를 화면에 그리는 렌더러 를 구현한 내용을 담고 있습니다. 또한, 팀 협업을 위한 가이드 문서를 추가했습니다.

🛠️ 주요 작업 내용

1. UI 컴포넌트 및 렌더러 구현 (packages/ui)

  • 기본 노드 컴포넌트: Hero, Heading, Text, Image, Button, Modal 컴포넌트 구현
  • NodeRenderer: 노드 데이터의 type에 따라 적절한 컴포넌트를 매핑하여 렌더링하는 핵심 로직 구현
  • DraggableNodeWrapper: (추후 D&D 구현을 위한) 노드 래퍼 컴포넌트 초안 작성

2. 타입 시스템 정립 (/types)

  • Node 구조: BaseNode를 상속받아 확장하는 WcxNode 유니온 타입 정의
  • Props & Styles: 각 컴포넌트별 고유 속성(Props)과 스타일 인터페이스 정의
  • Action 시스템: 노드 상호작용(링크, 모달, 데이터 변경 등)을 위한 NodeAction 타입 설계

3. 인터랙션 & 로직

  • useActionHandler: 노드에 정의된 액션(JSON)을 실제 실행 가능한 함수로 변환하는 훅 구현
  • RuntimeContext: 노드 간 상태 공유 및 동적 동작을 지원하기 위한 컨텍스트 추가

4. 협업 문서

  • apps/editor/WORK_DIVISION.md: 팀원(Nago) 복귀에 따른 업무 분담 및 폴더 구조 가이드 작성

기존에는 노드의 최상위의 스타일만 정의하는 구조였는데, 이제는 노드 내부에 여러개로 이루어진 하위 요소들의 스타일도 구조화해서 정의할 수 있도록 수정완료.
기존의 스타일 인터페이스에서 해당하는 Key들을 모두 포함해야 했었는데, partial로 선택적으로 받도록 수정 완료
팀원들을위한 모노레포 가이드 작성 완료
상위 노드객체를 받아서 노드의 내부 요소들에 해당하는 스타일을 적용하고 CSSProperties 객체로 변환하는 역할을 수행한다.
노드 렌더러가 렌더링한 노드 컴포넌트를 감싸서 유저가 자유롭게 위치 변경 가능하게 해준다.
전체 레이아웃 사이즈, 위치는 상위 wrapper컴포넌트에게 위임하고, 해당 노드 렌더러 컴포넌트는 컨텐츠 렌더링, 내부 요소 렌더링에 집중하도록 구현
className을 style객체에서 직접 참조하도록 수정 -> 인라인 스타일로 변경할때 className을 제외하고 추출하기때문에 className은 style객체에서 직접 참조해야한다.
style추출할때 processNodeStyles함수 사용하도록 수정완료
버튼 노드가 할 수 있는 일들을 정의한 타입입니다.
특정 행동을 트리거하는 버튼 노드가 타겟 노드에게 동적으로 변하도록 도와주는 중개소 역할인 context를 구현했습니다. 직접적으로 getElementById를 통해 변화시키면 리액트의 라이프 사이클을 무시하므로 context를 사용했습니다.
DB에는 js코드를 그대로 저장할 수 없기에, 객체로 된 행동 요구사항을 js코드로 전환해주는 역할을 합니다.
모달을 렌더링 하는 렌더러 컴포넌트 구현 완료.
에디터 화면에서 추가로 DND를 통해 하위 노드를 받을 수 있도록 children props를 받도록 설정했습니다.
액션 객체를 알맞은 액션 핸들러 로직으로 변경한뒤 동작하도록 구현 완료
@y-minion y-minion merged commit 7d44467 into develop Dec 17, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant